<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div class="box">

    </div>
    <script>
        var data = [{
            title: "标题1",
            list: ["列表内容1", '列表内容2']
        }, {
            title: "标题2",
            list: ["列表内容1", '列表内容2', '列表内容3']
        }, {
            title: "标题3",
            list: ["列表内容1", '列表内容2', '列表内容3', '列表内容4']
        }, {
            title: "标题4",
            list: ["列表内容1", '列表内容2', '列表内容3', '列表内容4', '列表内容5']
        }, {

        },];

        var str = '';
        data.forEach(function (item) {
            // itme 得到数组内的每个元素
            str += `  <div class="list">
                          <h4>${itme.title}</h4>
                        <ul>`;

            var str1 = "";
            for (var i = 0; i < item.list.length; i++) {
                str1 += `<li>${item.list[i]}</li>`;
            }
            console.log(str1);
            str += str1 + "</ul></div>"
        })
        var box = document.querySelector(".box")
        box.innerHTML = str;
    </script>
</body>

</html>